<template>
  <div>
    <!-- 导航栏 -->
    <a-nav />

    <!-- 主要内容 -->
    <b-container class="bv-example-row">
      <!-- 使用动画必须携带‘animate__animated’类 -->
      <b-row :class="[scrollTop <= 100 ? 'animate__backInDown' : '', 'animate__animated']">
        <!-- 轮播图 -->
        <a-carousel />
      </b-row>
      <!-- 使用动画必须携带‘animate__animated’类 -->
      <b-row
        v-for="item in 6"
        :key="item"
        :class="[scrollTop >= 800 ? 'animate__zoomInDown' : '', 'animate__animated']"
      >
        <b-col md="4">
          <div class="card-item"><a-card /></div>
        </b-col>
        <b-col md="4">
          <div class="card-item"><a-card /></div>
        </b-col>
        <b-col md="4">
          <div class="card-item"><a-card /></div>
        </b-col>
      </b-row>
    </b-container>
  </div>
</template>

<script>
import nav from "@/components/home/nav";
import card from "@/components/home/card";
import carousel from "@/components/home/carousel";
export default {
  data() {
    return {
      scrollTop: 0
    };
  },
  components: {
    "a-nav": nav,
    "a-card": card,
    "a-carousel": carousel,
  },
  mounted() {
    window.addEventListener("scroll", this.windowScroll);
  },
  methods: {
    /**
     * 滚动条距离页面顶部的距离
     * 以下写法原生兼容
     */
    windowScroll() {
      let scrollTop =  window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollTop = scrollTop
      console.log(scrollTop);
    },
  },
  beforeDestroy() {
    /**
     * 移除监听事件
     */
    window.removeEventListener("scroll", this.windowScroll);
  },
};
</script>

<style lang="scss" scoped>
.card-item {
  margin-top: 15px;
}
</style>
